<template>
	<!-- 首页->租房->月租-->
	<div class="monthlyrent" id="app">
		<!--头部-->
		<myheader></myheader>
		<!--搜索框-->
		<p class="underline"></p>
		<div class="search_box">
			<input type="search" placeholder=" 请输入小区/商圈/地铁 " class="search" />
			<span class="searchbg"></span>
		</div>
		<!--区域选择-->
		<choice></choice>
		<!--温馨提示-->
		<div class="reminder">
			<router-link to='/lideta/mydetails'>
				已为您呈现房源的最低价
			</router-link>
		</div>
		<div class="monthlyrent_databox">
			<!--没有数据-->
			<div class="noinfo" v-if="!showlogge">
				<img src="../../../../static/wfy/crying_face.jpg" />
				<h3 class="showtop">您还没有关注的房源</h3>
				<p>去关注房源吧</p>
			</div>
			<!--有数据-->
			<ul class="houseinfo" v-else-if="showlogge">
				<li>
					<router-link to='/lideta/mydetails'>
						<div><img src="../../../../static/wfy/huose01.gif"></div>
						<div class="housebox">
							<p class="title">独栋有米国际社区有米 （重庆嘉瑞大道店） 佛系社区 一室一厅</p>
							<p class="details"><span>30㎡ </span><span>北碚郊县 距蔡家站</span><span>0.6km</span></p>
							<div class="introduce">
								<span>在线签约</span>
								<span>有阳台</span>
								<span>近地铁</span>
								<span>免中介费</span>
								<span>押一付一</span>
							</div>
							<div class="pricebox">
								<p class="price"><span class="pic">1110</span><span class="month">元/月</span></p><span class="del">2个月起租</span>
							</div>
							<div class="flat__coupon"><span class="coupon_style">券</span>7日免租金券</div>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to='/lideta/mydetails'>
						<img class="monthlyrent_personal" src="../../../../static/wfy/personal.png" />
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import myheader from '@/components/public/myheader'
	import choice from '@/components/public/choice'
	export default {
		name: 'monthlyrent',
		data() {
			return {
				showlogge: true,
				
			}
		},
		mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				
			}
		},
		components: {
			myheader,
			choice
		},
		methods: {}
	}
</script>

<style scoped="scoped">
	/*搜索框*/
	
	.underline {
		width: 100%;
		height: 0.1rem;
		border-top: 1px solid #f5f5f5;
	}
	
	.search_box {
		width: 100%;
		height: 1.2rem;
		padding: 0.2rem 0.35rem;
		background: #fff;
		box-sizing: border-box;
		position: relative;
	}
	
	.search {
		width: 100%;
		height: 0.7rem;
		text-align: center;
		border: none;
		outline: none;
		color: #9399a5;
		font-size: 0.3rem;
		border-radius: 0.3rem;
		background: #f5f5f5;
	}
	
	.searchbg {
		position: absolute;
		width: 0.28rem;
		height: 0.28rem;
		background: url(../../../../static/wfy/search_03.png) no-repeat center;
		background-size: 0.28rem;
		left: 22%;
		top: 41%;
	}
	/**/
	
	.reminder {
		width: 100%;
		height: 0.95rem;
		background: #f6f3ee;
		padding: 0 0.35rem;
		box-sizing: border-box;
		line-height: 0.95rem;
	}
	
	.reminder a {
		display: inline-block;
		height: 0.8rem;
		padding-left: 0.55rem;
		font-size: 0.2rem;
		color: #b0954d;
		box-sizing: border-box;
		background: url(../../../../static/wfy/Bulb.png)no-repeat left center;
		background-size: 0.42rem;
	}
	/*数据*/
	
	.noinfo {
		margin-top: 3.1rem;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.showtop {
		width: 100%;
		text-align: center;
		margin-top: 0.85rem;
	}
	
	.noinfo img {
		width: 1.63rem;
		height: 1.63rem;
	}
	
	.noinfo p {
		margin-top: 0.35rem;
		font-size: 0.3rem;
		color: #8f929c;
	}
	
	.houseinfo {
		list-style: none;
	}
	
	.houseinfo li {
		padding: 0.35rem 0;
		/*height: 2.35rem;*/
		box-sizing: border-box;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.houseinfo li>a {
		width: 100%;
		height: 100%;
		display: block;
		padding-left: 0.3rem;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	
	.houseinfo li>a img {
		width: 2.09rem;
		height: 1.58rem;
	}
	
	.houseinfo .housebox {
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	
	.title {
		display: inline-block;
		font-size: 0.28rem;
		color: #101d37;
		height: 0.8rem;
		line-height: 0.4rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.details {
		display: inline-block;
		font-size: 0.2rem;
		color: #b2b5b8;
		line-height: 0.5rem;
		height: 0.5rem;
	}
	
	.introduce {
		height: 0.4rem;
		width: 3.3rem;
		white-space: nowrap;
		/*text-overflow: ellipsis;*/
		overflow: hidden;
	}
	
	.introduce span {
		font-size: 0.2rem;
		color: #5680a6;
		padding: 0.03rem;
		border-radius: 0.03rem;
		background: #e6ecf2;
	}
	
	.pricebox {
		display: flex;
		justify-content: space-between;
		padding-right: 0.3rem;
		height: 0.6rem;
		line-height: 0.6rem;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.price {
		color: #fe6660;
		height: 0.5rem;
		font-size: 0.2rem;
	}
	
	.pic {
		font-size: 0.35rem;
		font-weight: 800;
	}
	
	.month {
		padding: 0.1rem;
	}
	
	.del {
		display: inline-block;
		width: auto;
		height: 0.33rem;
		margin-top: 0.1rem;
		border: none;
		font-size: 0.1rem;
		color: #f6804d;
	}
	
	.flat__coupon {
		display: block;
		font-size: 0.25rem;
		color: #9399a5;
		height: 0.6rem;
		line-height: 0.45rem;
		padding: 0.2rem 0;
		box-sizing: border-box;
	}
	
	.coupon_style {
		width: 0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: #f5615b;
		color: #fff;
		font-size: 0.2rem;
		margin-right: 0.2rem;
		border-radius: 0.05rem;
		text-align: center;
		line-height: 0.3rem;
	}
	
	.houseinfo li>a .monthlyrent_personal {
		width: 100%;
		height: 100%;
		padding-right: 0.2rem;
		box-sizing: border-box;
	}
</style>